import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { LeftOutline } from 'antd-mobile-icons'
import style from './style.module.css'
import Navbar from '../../components/Navbar/Index'
import { Form, Button, Input, Selector } from 'react-vant'
import { DropdownMenu, Stepper } from 'react-vant';
import { Tabs } from 'react-vant'
function MortgageCalculator() {
    const [tabKey, setTabKey] = useState('a')
    const [numAll, setnumAll] = useState(''); // 房款总额
    const [startBuy, setStartBuy] = useState(10); // 首付
    const [interestrate, setInterestrate] = useState(0.049); // 利率
    const [timeValue, setTimeValue] = useState(10)// 贷款期限
    const [mouted, setMouted] = useState(1); // 方法
    const navigate = useNavigate()

    const [MonthlyPayment, setMonthlyPayment] = useState(0) //月供
    const [returnNum, setReturnNum] = useState(0) //已归还本金累计额
    const [returnRrincipal, setReturnRrincipal] = useState(0) //每月应还本金
    const [returnInterest, setReturnInterest] = useState(0) //每月应还利息
    const [Monthlypaymentdecline, setMonthlypaymentdecline] = useState(0)//每月月供递减额
    const [InterestAll, setInterestAll] = useState(0) //总利息
    const calculateMonthlyPayment = () => {
        console.log('tabKey', tabKey, 'mouted', mouted, 'numAll', numAll, 'startBuy', startBuy, 'interestrate', interestrate, 'timeValue', timeValue);
        const loanNumall = numAll * (100 - startBuy) / 100 //贷款本金
        const methAll = timeValue * 12 //总月数

        console.log('loanNumall', loanNumall, 'methAll', methAll, 'interestrate', interestrate);
        if (tabKey === 'a') {
            //商业贷款
            if (mouted == '1') {
                // 等额本金计算公式
                //•每月月供额 = (贷款本金÷还款月数) +(贷款本金 - 已归还本金累计额)×月利率
                // •每月应还本金 = 贷款本金÷还款月数
                // •每月应还利息 = 剩余本金×月利率 = (贷款本金 - 已归还本金累计额)×月利率。
                // •每月月供递减额 = 每月应还本金×月利率 = 贷款本金÷还款月数×月利率
                // •总利息 = 还款月数×(总贷款额×月利率 - 月利率×(总贷款额÷还款月数)* (还款月数 - 1)÷2 + 总贷款额÷还款月数)

                let num = (loanNumall / methAll) + (loanNumall - returnNum) * (interestrate / 12) //月供
                console.log(num);
                const loanNum = (numAll * (100 - startBuy) / 100) //贷款总额
                setMonthlyPayment(num)
                setReturnRrincipal((numAll * (100 - startBuy) / 100) / (timeValue * 12))
                setReturnInterest((loanNumall - returnNum) * (interestrate / 12))
                setMonthlypaymentdecline(returnRrincipal * (interestrate / 12))
                setInterestAll(methAll * (loanNum * (interestrate / 12) - (interestrate / 12) * (loanNum / methAll) * (loanNum - 1) / 2 + (loanNum / methAll)))//总利息
            } else if (mouted == '2') {
                //等额本金
            }


        } else if (tabKey === 'b') {
            //公积金贷款



        }
    }
    return (
        <div>
            <Navbar title={'房贷计算器'}
                nav_footer={<div style={{ height: '30px' }}></div>}
            ></Navbar>
            <div className={style['go_back']} onClick={() => { navigate(-1) }}><LeftOutline style={{ color: '#fff', fontSize: '20px' }} /></div>

            <div className={style['wapper']}>
                <Tabs active='a' style={{
                    '--rv-tab-active-text-color': '#0B7CF3',
                    '--rv-tabs-bottom-bar-color': '#0B7CF3'
                }} onChange={(e) => {
                    console.log(e)
                    setTabKey(e)
                }}>
                    <Tabs.TabPane name={'a'} title={`商业贷款`}>
                        <Form
                            layout='horizontal'
                            footer={
                                <Button style={{
                                    width: '100%',
                                    background: '#0F80F4',
                                    color: '#fff',
                                    fontSize: '14px'
                                }}
                                    onClick={() => calculateMonthlyPayment()}
                                >
                                    计算
                                </Button>
                            }
                        >
                            <Form.Item
                                name='numAll'
                                label='房款总额(元)'
                                value={numAll}
                            >
                                <Input onChange={(value) => { setnumAll(value) }} placeholder='请输入' />
                            </Form.Item>
                            <Form.Item
                                name='startBuy'
                                label='首付比例'

                            >
                                <select style={{
                                    border: 'none',
                                    outline: 'none',
                                    width: '100%',

                                }}
                                    onChange={(e) => {
                                        console.log(e);
                                        setStartBuy(e.target.value)
                                    }}
                                >
                                    <option value="10">10%</option>
                                    <option value="20">20%</option>
                                    <option value="30">30%</option>
                                    <option value="40">40%</option>
                                    <option value="50">50%</option>
                                    <option value="60">60%</option>
                                    <option value="70">70%</option>
                                    <option value="70">80%</option>
                                    <option value="90">90%</option>
                                </select>
                            </Form.Item>
                            <Form.Item
                                name='interestrate'
                                label='商贷利率'

                            >
                                <select style={{
                                    border: 'none',
                                    outline: 'none',
                                    width: '100%',

                                }}
                                    onChange={(e) => setInterestrate(e.target.value)}
                                    value={interestrate}
                                >
                                    <option value="0.049">4.9%*基准利率</option>
                                    <option value="0.0588">4.9%*1.2倍</option>
                                    <option value="0.0539">4.9%*1.1倍</option>
                                    <option value="0.0411">4.9%*0.9倍</option>
                                    <option value="0.0392">4.9%*0.8倍</option>
                                    <option value="0.0343">4.9%*0.7倍</option>
                                </select>
                            </Form.Item>
                            <Form.Item
                                name='time'
                                label='贷款期限(年)'

                            >
                                <Stepper
                                    min={10}
                                    value={timeValue}
                                    step={10}
                                    onChange={v => {
                                        setTimeValue(v)
                                    }}
                                />
                            </Form.Item>
                            <Form.Item
                                name='status'
                                label='还款方式'

                            >
                                <Selector
                                    style={{
                                        '--rv-selector-border-radius': '100px',
                                        '--rv-selector-checked-border':
                                            'solid var(--adm-color-primary) 1px',
                                        '--rv-selector-padding': '3px 10px',
                                        fontSize: '12px'
                                    }}
                                    showCheckMark={false}
                                    options={[
                                        {
                                            label: '等额本息',
                                            value: '1',
                                        },
                                        {
                                            label: '等额本金',
                                            value: '2',
                                        }
                                    ]}
                                    defaultValue={['1']}
                                    onChange={(e) => { setMouted(e[0]) }}
                                />
                            </Form.Item>
                        </Form>
                    </Tabs.TabPane>
                    <Tabs.TabPane name={'b'} title={`公积金贷款`}>
                        <Form
                            layout='horizontal'
                            footer={
                                <Button style={{
                                    width: '100%',
                                    background: '#0F80F4',
                                    color: '#fff',
                                    fontSize: '14px'
                                }}>
                                    计算
                                </Button>
                            }
                        >
                            <Form.Item
                                name='numAll'
                                label='房款总额(万)'

                            >
                                <Input onChange={(value) => { setnumAll(value) }} placeholder='请输入' />
                            </Form.Item>
                            <Form.Item
                                name='startBuy'
                                label='首付比例'

                            >
                                <select style={{
                                    border: 'none',
                                    outline: 'none',
                                    width: '100%',

                                }}
                                    onChange={(e) => setStartBuy(e.target.value)}
                                >
                                    <option value="10">10%</option>
                                    <option value="20">20%</option>
                                    <option value="30">30%</option>
                                    <option value="40">40%</option>
                                    <option value="50">50%</option>
                                    <option value="60">60%</option>
                                    <option value="70">70%</option>
                                    <option value="70">80%</option>
                                    <option value="90">90%</option>
                                </select>
                            </Form.Item>
                            <Form.Item
                                name='interestrate'
                                label='公积金利率'

                            >
                                <div>3.25%</div>
                            </Form.Item>
                            <Form.Item
                                name='time'
                                label='贷款期限(年)'

                            >
                                <Stepper
                                    min={10}
                                    value={timeValue}
                                    step={10}
                                    onChange={v => {
                                        setTimeValue(v)
                                    }}
                                />
                            </Form.Item>
                            <Form.Item
                                name='status'
                                label='还款方式'

                            >
                                <Selector
                                    style={{
                                        '--rv-selector-border-radius': '100px',
                                        '--rv-selector-checked-border':
                                            'solid var(--adm-color-primary) 1px',
                                        '--rv-selector-padding': '3px 10px',
                                        fontSize: '12px'
                                    }}
                                    showCheckMark={false}
                                    options={[
                                        {
                                            label: '等额本息',
                                            value: '1',
                                        },
                                        {
                                            label: '等额本金',
                                            value: '2',
                                        }
                                    ]}
                                    defaultValue={['1']}
                                    onChange={(e) => { setMouted(e[0]) }}
                                />
                            </Form.Item>
                        </Form>
                    </Tabs.TabPane>
                </Tabs>

                <p>
                    贷款年数:{timeValue}年
                    贷款总额:{(numAll * (100 - startBuy) / 100)}元
                    月供金额：{MonthlyPayment.toFixed(2)}
                    每月应还本金{returnRrincipal.toFixed(2)}
                    每月应还利息{returnInterest.toFixed(2)}
                </p>
            </div>
        </div>
    );
}

export default MortgageCalculator